<template>
    <Frame
        :steps="steps"
        :current-index="step"
        :err-msg="errMsg"
    >
        <FrameContent
            v-if="step === 0"
            img-full
            btn-text="签署"
            :pdfUrl="PDFUrl"
            @on-confirm="esignVisible = true"
        />
        <FrameContent
            v-if="step === 1"
            img-full
            btn-text="完成"
            :pdfUrl="successPDFUrl"
            @on-confirm="handleComplete"
        />
        <SMSPopup
            ref="SMSPopup"
            v-model="SMSPopupVisible"
            :loading="sendMsgLoading"
            :countdown="countdown"
            @on-re-accept="handleSendMsg"
            @on-submit="handleVerifyCode"
        />
        <Esign
            v-model="esignVisible"
            @on-confirm="handleSignComplete"
        />
    </Frame>
</template>
<script>
import Esign from '@/components/Esign/Esign';
import countdown from '@/mixins/countdown.js';
import {
    getSignContractByCustomize_api,
    signContractForImg_api,
    verifyCode_api,
    sendVerificationCode_api,
    expertReviewContract_api,
} from '@/api';
export default {
    name: 'SignForExpert',
    components: {
        Esign,
    },
    mixins: [countdown],
    data() {
        return {
            // 错误消息
            errMsg: '',

            // 用户信息
            token: '',
            srcOrderNo: '',

            // 协议编号
            contractNo: '',
            // 安心签用户ID
            userId: '',

            // 当前步骤
            step: 0,
            steps: ['签署协议', '完成签署'],

            // 签字弹窗
            esignVisible: false,
            // 签字文件base64编码
            signBase64: '',

            // 验证码弹窗
            SMSPopupVisible: false,
            // 验证码弹窗按钮 loading 状态
            sendMsgLoading: false,

            // 文档路径
            PDFUrl: '',
            successPDFUrl: '',
        };
    },
    async mounted() {
        await this.getAccessToken();
        this.getData();
    },
    methods: {
        handleComplete() {
            try {
                app.back();
            } catch (e) {
                window.close();
            }
        },

        // 获取已签署协议
        getSignContract() {
            let data = {
                accessToken: this.accessToken,
                srcOrderNo: this.srcOrderNo,
            };
            getSignContractByCustomize_api(data)
                .then((res) => {
                    this.SMSPopupVisible = false;
                    this.successPDFUrl = res.fileList[0].fileBase64;
                })
                .catch((err) => {
                    this.$toast(err);
                    this.$refs.SMSPopup.reset();
                });
        },

        handleSign() {
            let data = {
                contractNo: this.contractNo,
                srcOrderNo: this.srcOrderNo,
                userId: this.userId,
                imageData: this.signBase64.split(',')[1],
            };
            signContractForImg_api(data)
                .then((res) => {
                    this.successPDFUrl = res.fileList[0].fileBase64;
                    this.sendMsgLoading = false;
                    this.SMSPopupVisible = false;
                    document.title = '签署成功';
                    this.step++;
                })
                .catch((err) => {
                    this.sendMsgLoading = false;
                    this.$toast(err);
                });
        },

        // 校验验证码
        handleVerifyCode(checkCode) {
            let data = {
                projectCode: this.srcOrderNo,
                userId: this.userId,
                checkCode,
            };
            this.sendMsgLoading = true;
            verifyCode_api(data)
                .then(() => {
                    this.handleSign();
                })
                .catch((err) => {
                    this.sendMsgLoading = false;
                    this.$refs.SMSPopup.reset();
                    this.$toast(err);
                });
        },
        // 发送验证码
        handleSendMsg() {
            let data = {
                userId: this.userId,
                projectCode: this.srcOrderNo,
            };
            // 10.27 适配 api 数据返回格式
            sendVerificationCode_api(data)
                .then((res) => {
                    // if (res.resultCode === '0') {}
                    // 倒计时
                    this.handleCountdown();
                    this.esignVisible = false;
                    this.SMSPopupVisible = true;
                })
                .catch((err) => {
                    this.$toast(err);
                });
        },

        // 保存签字 base64编码 发送验证码
        handleSignComplete(base64) {
            this.signBase64 = base64;
            this.handleSendMsg();
        },

        // 获取未签署pdf文件
        getData() {
            let data = {
                token: this.token,
                srcOrderNo: this.srcOrderNo,
                certName: this.mztUser.name,
                certNo: this.mztUser.cardNum,
                phone: this.mztUser.mobile,
            };
            // 10.26 适配 api 错误返回格式
            expertReviewContract_api(data)
                .then((res) => {
                    // this.PDFUrl = res.fileList[0].fileBase64
                    this.PDFUrl = res.fileStream;
                    // 协议编号
                    this.contractNo = res.contractNo;
                    // 安心签
                    this.userId = res.userId;
                })
                .catch((err) => {
                    this.errMsg = err;
                });
        },

        async getAccessToken() {
            let { token, srcOrderNo } = this.$route.query;

            this.token = token;
            this.srcOrderNo = srcOrderNo;
        },
    },
};
</script>
<style scoped></style>
